import React from 'react'
import axios from '../../utils/axios'
import {useNavigate} from "react-router-dom"
import {useEffect,useState} from "react"
import {useSelector,useDispatch} from "react-redux"
 function Cnima() {
   let dispatch = useDispatch()
  let store = useSelector((state)=>{
      console.log(state,"satte");
      return {
        ...state
      }
  })
  let fn = ()=>{ // 通过dispatch来触发一个action
    dispatch({
      type:"changeage"
    })
  }
  let navigate = useNavigate()
  let [arr,setArr] = useState([])
  useEffect(()=>{
      axios.get("/list").then(res=>{
        setArr(res.data)
      })
  },[])
  let goDetail = (item)=>{
        console.log(item);
        navigate("/detail",{ // state里用于传递路由参数
            state:item
        })
  }
  return (
    <div>
      <h4>{store.name}</h4>
      <h4>{store.age}</h4>
      <button onClick={fn}>点击</button>
        {
            arr && arr.length ? arr.map((item,index)=>{
                return <div key={index} onClick={()=>goDetail(item)}>
                    <img src={item.img} alt="" />
                    <h4>{item.tit}</h4>
                </div>
            }):"暂无数据"
        }
    </div>
  )
}

export default Cnima